@extends('member')
@section('title'){{$project->project_name}}@endsection
@section('styles')
    <link href="{{asset('static/webuploader/webuploader.css')}}" rel="stylesheet">

    <style type="text/css">
        #error-message{
            font-size: 13px;
            color: red;
            vertical-align: middle;
            margin-top: -10px;
            display: inline-block;
            height: 40px;
        }

    </style>
@endsection
@section('scripts')

    <script type="text/javascript">
        function showError($msg) {
            $("#error-message").addClass("error-message").removeClass("success-message").text($msg);
            return false;
        }
        function showSuccess($msg) {
            $("#error-message").addClass("success-message").removeClass("error-message").text($msg);
            return true;
        }

        $(function () {

            $("#btn-add-dictionary").on("click", function(){
                $("#edit-dictionary-panel").modal('show');
                $("#myModalLabel").text("新增数据结构");
                $("#dictionary-id").val("");
                $("#mode-local").trigger("click");
            });

            $("#edit-dictionary-panel").on('click','#mode-local',function () {
                $("#local-panel").show();
                $("#remote-panel").hide();
            }).on('click','#mode-remote',function () {
                $("#remote-panel").show();
                $("#local-panel").hide();
            });

            $('#edit-dictionary-panel').on('show.bs.modal', function () {
                $("#dictionaryForm").get(0).reset();
                $(".uploader-list").empty();
                $("#error-message").empty();
                $("#dictionaryForm").find('button[type="submit"]').button('reset');
            });


            //表单提交
            var submitLock = false;
            $("#dictionaryForm").ajaxForm({
                beforeSubmit : function () {
                    if(submitLock){
                        return false;
                    }
                    var name = $.trim($("#name").val());
                    if(!name){
                        return showError("数据结构名称不能为空");
                    }
                    $("#dictionaryForm").find('button[type="submit"]').button('loading');
                    submitLock = true;
                },
                success : function (res) {

                    if(res.success == 1){
                        showSuccess("保存成功");
                        $("#edit-dictionary-panel").modal('hide');
                        location.reload();
                    }else{
                        showError(res.message);
                    }
                    $("#dictionaryForm").find('button[type="submit"]').button('reset');
                },
                complete:function(){
                    submitLock = false;
                }
            });

            /**
             * 删除
             */
            $("#dictionary-list").on("click", ".btn-delete", function(){
               var id = $(this).data("id");
               var name = $(this).data("name");
               var url = this.href;
               Modal.confirm("确定删除《" + name + "》?",
                   {
                       confirm:function(){
                           $.ajax({
                               url:url,
                               success:function(response){
                                   location.reload();
                               }
                           })
                       }
                   });
               return false;
            });

            /**
             * 编辑
             */
            $("#dictionary-list").on("click", ".btn-edit", function(){
                $("#edit-dictionary-panel").modal('show');
                var dictionary = $(this).data();
                $("#myModalLabel").text("编辑数据结构");
                $("#id").val(dictionary.id);
                $("#name").val(dictionary.name);
                $("#db_host").val(dictionary.db_host);
                $("#db_user").val(dictionary.db_user);
                $("#db_name").val(dictionary.db_name);
            });


        });

    </script>

@endsection
@section('content')
<div class="project-box">
        <div class="box-head">
            <h4>{{$project->project_name}}-数据结构</h4>
            <label class="btn btn-success btn-sm pull-right"  style="margin-top: 10px;" title="添加数据库配置" data-toggle="modal" id="btn-add-dictionary">
                添加数据库配置
            </label>
        </div>
        <div class="box-body">
            <div class="error-message">
            </div>
            <div class="project-list" id="dictionary-list">
                <ul>
                    @foreach($lists as $item)
                        <li>
                            <div>
                                <div class="pull-left">
                                    {{$item->name}}
                                </div>
                                <div class="pull-right">

                                    <a href="{{route('home.dictionary',['project_id'=>$item->project_id, 'id' => $item->id])}}" title="查看数据结构" style="font-size: 12px;" data-toggle="tooltip" data-placement="bottom"  target="_blank"><i class="fa fa-eye"></i> 查看</a>
                                    <a class="btn-edit" href="javascript:;" title="编辑" data-toggle="tooltip" data-placement="left" data-name="{{$item->name}}" data-id="{{$item->id}}"  data-db_host="{{$item->db_host}}" data-db_user="{{$item->db_user}}" data-db_name="{{$item->db_name}}"  style="font-size: 12px;"><i class="fa fa-pencil"></i> 编辑</a>
                                    <a href="{{route('dictionary.delete',['id'=>$item->id])}}" title="删除" data-toggle="tooltip" data-placement="left" data-name="{{$item->name}}" data-id="{{$item->id}}}" class="btn-delete" style="font-size: 12px;"><i class="fa fa-trash-o"></i> 删除</a>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>

    </div>
@if((isset($is_owner) && $is_owner) || $member->group_level === 0)

<!-- Modal -->
<div class="modal fade" id="edit-dictionary-panel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form role="form" method="post" action="{{route('dictionary.save',['project_id'=>$project->project_id])}}" id="dictionaryForm">
                <input type="hidden" name="id" id="id" />
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增数据结构</h4>
                </div>
                <div class="modal-body">
                    <div class="wraper">
                        <div class="form-group">
                            <label for="name">名称<strong class="text-danger">*</strong></label>
                            <input type="text" class="form-control" name="name" id="name" max="20" placeholder="数据结构名称" value="">
                        </div>
                        <div class="form-group">
                            <label for="name">数据库地址<strong class="text-danger">*</strong></label>
                            <input type="text" class="form-control" name="db_host" id="db_host" max="200" placeholder="数据结构名称" value="">
                        </div>
                        <div class="form-group">
                            <label for="name">数据库名称<strong class="text-danger">*</strong></label>
                            <input type="text" class="form-control" name="db_name" id="db_name" max="50" placeholder="数据库名称" value="">
                        </div>
                        <div class="form-group">
                            <label for="name">数据库账户<strong class="text-danger">*</strong></label>
                            <input type="text" class="form-control" name="db_user" id="db_user" max="20" placeholder="数据库账户" value="">
                        </div>
                        <div class="form-group">
                            <label for="name">数据库密码<strong class="text-danger">*</strong></label>
                            <input type="password" class="form-control" name="db_passwd" id="db_passwd" max="50" placeholder="数据库密码" value="">
                        </div>

                    </div>

                </div>

                <div class="modal-footer">
                    <span id="error-message" style="vertical-align: baseline"></span>
                    <button type="submit" class="btn btn-success" data-loading-text="保存中...">立即保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endif
@endsection